<template>
  <div class="route-list">
    <mt-header title="路线列表" fixed>
      <router-link to slot="left">
        <mt-button icon="back" @click="$router.go(-1)"></mt-button>
      </router-link>
      <!-- <mt-button icon="more" slot="right"></mt-button> -->
    </mt-header>

    <div class="route-options">
      <div class="option-item" @click="handleClick">
        全部路线
        <span slot="icon" class="iconfont">&#xe614;</span>
      </div>
      <div class="option-item" @click="handleClick">
        出发时间
        <span slot="icon" class="iconfont">&#xe614;</span>
      </div>
      <div class="option-item" @click="handleClick">
        出发地
        <span slot="icon" class="iconfont">&#xe614;</span>
      </div>
      <div class="option-item" @click="handleClick">
        目的地
        <span slot="icon" class="iconfont">&#xe614;</span>
      </div>
      <mt-tab-container v-model="active">
        <mt-tab-container-item id="全部路线">
          <mt-cell v-for="n in 10" title="tab-container 1" :key="n"></mt-cell>
        </mt-tab-container-item>
        <mt-tab-container-item id="出发时间">
          <mt-cell v-for="n in 5" title="tab-container 2" :key="n"></mt-cell>
        </mt-tab-container-item>
        <mt-tab-container-item id="出发地">
          <mt-cell v-for="n in 7" title="tab-container 3" :key="n"></mt-cell>
        </mt-tab-container-item>
        <mt-tab-container-item id="目的地">
          <mt-cell v-for="n in 7" title="tab-container 3" :key="n"></mt-cell>
        </mt-tab-container-item>
      </mt-tab-container>
    </div>

    <div class="route-content">
      <div v-for="(item, index) in routeList" :key="index">
        <router-link :to="'/routeServDetail/' + item.id+'/'+item.creator">
          <my-route :route="item"></my-route>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { fetchGetData,fetchPostData } from "@/api/fetch.js";
export default {
  name: "route-list",
  data() {
    return {
      routeList: [],
      active: "",
      // loading: false,
    };
  },
  props: [],
  methods: {
    handleClick() {
      if (this.active === this.$vnode) {
        this.active = "";
        console.log(this.active + "----" + this.$vnode);
      } else {
        this.active = this.$vnode;
        console.log(this.active + "----" + this.$vnode);
      }
    },
    
  },
  mounted() {
    fetchPostData('/api/route/list').then(data => {
        if (data.status == 1) {
          this.routeList = data.data.rows;
        } else {
          console.log("fail");
        }
      })
  }
};
</script>

<style lang="stylus" scoped>
.route-list {
  padding-top 80px;
  .route-options {
    height: 40px;
    line-height: 40px;
    display: flex;
    position: fixed;
    top: 40px;
    z-index: 99;
    width: 100%;
    text-align: center;

    .option-item {
      flex: 1;
      background-color: #eee;

      .iconfont {
        font-size: 0.2rem;
      }
    }

    // .option-item:nth-child(2n) {
    //   background-color: orange;
    // }
  }

  .mint-tab-container {
    position: fixed;
    z-index: 99;
    width: 100%;
    top: 90px;
  }

  .route-content {
    padding: 0 0.3rem;
    // margin-top: 90px;
  }
}
</style>